<!--
 * Created by PhpStorm.
 * User: jackhhy
 * Date: 2019/7/11-14:15
 * Link: https://gitee.com/luckygyl/luckyAdmin
 * FileName: add_images.html
 *-->

<!DOCTYPE html>
<html lang="en" >
<head >
    <meta charset="UTF-8" >
    <title >Title</title >
    <link href="{__FRAME_PATH}css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="{__FRAME_PATH}css/animate.css" rel="stylesheet">

    <script src="{__FRAME_PATH}js/jquery.min.js"></script>
    <link href="{__FRAME_PATH}css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link rel="stylesheet" href="{__PLUG_PATH}layui/css/layui.css">
    <script src="{__PLUG_PATH}layui/layui.js"></script>
    <script src="{__FRAME_PATH}js/bootstrap.min.js?v=3.3.6"></script>

    <link rel="stylesheet" type="text/css" href="{__PLUG_PATH}webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="{__FRAME_PATH}css/webuploader-demo.css">

</head >

<body class="gray-bg">


<div class="ok-body">

    <div class="layui-fluid">
        <div class="layui-card">

            <div class="layui-card-body" style="padding: 15px;">

                <div class="layui-form">

                        <div class="wrapper wrapper-content animated fadeIn">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="ibox float-e-margins">

                                        <div class="ibox-content">
                                            <div class="page-container">
                                                <!-- <p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo.</p>-->
                                                <div id="uploader" class="wu-example">
                                                    <input type="hidden" id="imageurl" name="imgurl" class="layui-input" lay-verify="required" lay-reqText="请先上传图片" style="width: 100%"> <!--存放图片路径-->
                                                    <input type="hidden" name="id" value="{$id}" >
                                                    <div class="queueList">
                                                        <div id="dndArea" class="placeholder">
                                                            <div id="filePicker"></div>
                                                            <p>或将照片拖到这里，单次最多可选300张</p>
                                                        </div>
                                                    </div>
                                                    <div class="statusBar" style="display:none;">
                                                        <div class="progress">
                                                            <span class="text">0%</span>
                                                            <span class="percentage"></span>
                                                        </div>
                                                        <div class="info"></div>
                                                        <div class="btns">
                                                            <div id="filePicker2"></div>
                                                            <div class="uploadBtn">开始上传</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>

                        </div>

                    <?php echo Form::Submit('add','立即提交');?>

                </div>
            </div>

        </div>
    </div>
</div>


<!-- Web Uploader -->
<script type="text/javascript">
    var ul="{__PLUG_PATH}";
    // 添加全局站点信息
    var BASE_URL = ul+'webuploader';  //webupload 地址
    var up_load="{:url('admin/common/Webploader')}"  //图片上传地址
</script>

<script src="{__PLUG_PATH}webuploader/webuploader.min.js"></script>

<script src="{__FRAME_PATH}js/webuploader-demo.js"></script>


<script>
    layui.use(['element', 'form', 'jquery'], function () {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        /**
         * 提交表单数据
         */
        form.on('submit(add)', function (data) {
            $.ajax({
                url:"{:url('album/AddImages')}",
                type:'post',
                data:data.field,
                error: function(error) {
                    layer.msg("服务器错误或超时");
                    return false;
                },
                beforeSend:function(){
                    layer.load(2);
                },
                success:function(data)
                {
                    if (data.code==1) {
                        layer.msg(data.msg,{icon: 1, time: 1500,shade:0.3, anim: 4},function () {
                            parent.location.reload(); //刷新父页面
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });

                    }else{
                        layer.msg(data.msg,{icon:15,time:1500,shade:0.3,anim:4});
                    }
                },
                complete:function(){
                    layer.closeAll('loading');
                }
            });
            return false;
        });
    })
</script>
</body>

</html >